<template>
    <div class="header">

        <el-container class="headBg">
            <el-aside width="492px">
                <!--<div class="headerTitle">领导驾驶舱</div>-->
                <div class="headImg"></div>
            </el-aside>
            <el-main>
                <div class="nav clearfix">
                    <router-link to="visitor" :class="{'activeNav':active == 1}" @click.native="clickNav(1)">游客分析</router-link>
                    <router-link to="public" :class="{'activeNav':active == 2}" @click.native="clickNav(2)">公共设施</router-link>
                    <router-link to="intellect" :class="{'activeNav':active == 3}" @click.native="clickNav(3)">智能安防</router-link>
                    <router-link to="ecology" :class="{'activeNav':active == 4}" @click.native="clickNav(4)">智能生态</router-link>
                    <router-link to="traffic" :class="{'activeNav':active == 5}" @click.native="clickNav(5)">交通管理</router-link>
                    <router-link to="manage" :class="{'activeNav':active == 6}" @click.native="clickNav(6)">经营状况</router-link>
                    <router-link to="" @click.native="jumpPage">动环监测</router-link>
                </div>
            </el-main>
        </el-container>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                active:1,
            }
        },
        mounted() {
            this.navStyle();
        },
        methods: {
            clickNav(val) {
                this.active = val;
            },
            navStyle() {
                if(this.$route.path == '/visitor') {
                    this.active = 1;
                } else if(this.$route.path == '/public') {
                    this.active = 2;
                } else if(this.$route.path == '/intellect') {
                    this.active = 3;
                } else if(this.$route.path == '/ecology') {
                    this.active = 4;
                } else if(this.$route.path == '/traffic') {
                    this.active = 5;
                } else if(this.$route.path == '/manage') {
                    this.active = 6;
                }
            },
            jumpPage() {
                //跳动环监测页面
                window.open('https://192.168.5.211:31943','_blank');
            }
        },
    }
</script>

<style scoped lang="scss">
    .header{
        position: relative;
        z-index: 1;
        width: 100%;
        height: 68px;
        line-height: 68px;
        background: rgba(0, 87, 132, 0.3);
        border-bottom: 2px solid;
        border-image: linear-gradient(0deg, #0085DA, #78CEFF, #0085DA) 10 10;
        /*background: linear-gradient(90deg, #0085DA 0%, #78CEFF 51%, #0085DA 100%);*/
        .headBg{
            background: url("../../static/header/img/headBg.png") no-repeat 100% 20%;
            background-size: 100% 200%;
        }
        .headImg{
            width: 100%;
            height: 100%;
            background: url("../../assets/titleImg.png") no-repeat center center;
            background-size: 100% 104%;
        }
        .headerTitle{
            background: url("../../static/header/img/headerTitle.png") no-repeat center center;
            background-size: 100% 100%;
            font-size: 28px;
            font-weight: 600;
            letter-spacing: 28px;
            font-style: oblique;
            color: #fff;
            text-indent: 33px;
            line-height: 60px;
            height: 68px;
        }
        .nav{
            width: 1000px;
            float: left;
            a{
                color: #559BE8;
                font-size: 26px;
                margin-right: 30px;
                font-weight: bold;
                display: block;
                float: left;
                font-family: Source Han Sans CN;
            }
            a:last-child{
                margin-right: 0;
            }
            a:hover{
                color: #fff;
                transition: 0.4s;
            }
            .activeNav{
                color: #fff;
            }
        }
    }
</style>